<template>
  <div class="container">
    <div class="singerSelect">
      <ul class="firstLetter" @click="handleFirstLetter">
        <li class="active" ref="firstLetterLi">全部</li>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
        <li>L</li>
        <li>M</li>
        <li>N</li>
        <li>O</li>
        <li>P</li>
        <li>Q</li>
        <li>R</li>
        <li>S</li>
        <li>T</li>
        <li>U</li>
        <li>V</li>
        <li>W</li>
        <li>X</li>
        <li>Y</li>
        <li>Z</li>
        <li>#</li>
      </ul>
      <ul class="region" @click="handleRegion">
        <li class="active" ref="regionLi">全部</li>
        <li>华语</li>
        <li>欧美</li>
        <li>韩国</li>
        <li>日本</li>
        <li>其他</li>
      </ul>
      <ul class="gender" @click="handleGender">
        <li class="active" ref="genderLi">全部</li>
        <li>男歌手</li>
        <li>女歌手</li>
        <li>乐队</li>
      </ul>
    </div>
    <div class="singerImageContainer">
      <div
        class="singerImageItem"
        v-for="item in recommendSinger"
        :key="item.id"
        @click="toSingerDetail(item.id)"
      >
        <img :src="item.picUrl" alt="" />
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <div class="singerListContainer">
      <div
        class="singerListItem"
        v-for="item in singerList"
        :key="item.id"
        @click="toSingerDetail(item.id)"
      >
        {{ item.name }}
      </div>
    </div>
    <ElPagination
      :page-size="49"
      :pager-count="7"
      layout="prev, pager, next"
      :total="1000"
      :current-page="currentPage"
      @current-change="pageChange"
    >
    </ElPagination>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Artlist",
});
</script>
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElPagination } from "element-plus";
import axios from "axios";
import { recommendSingerListModel, singerListModel } from "./artlist";
import request from "../../utils/request";

const router = useRouter();
const route = useRoute();

let recommendSinger = ref<recommendSingerListModel>([]);
let singerList = ref<singerListModel>([]);
const currentPage = ref<number>(1);
const firstLetterLi = ref(null);
const regionLi = ref(null);
const genderLi = ref(null);

const prevLi = reactive({
  firstLetterLi: null,
  regionLi: null,
  genderLi: null,
});
onMounted(async () => {
  prevLi.firstLetterLi = firstLetterLi.value;
  prevLi.regionLi = regionLi.value;
  prevLi.genderLi = genderLi.value;
  const result = await request("/artist/list", {
    type: -1,
    area: -1,
    initial: -1,
    limit: 49,
    offset: 0,
  });
  recommendSinger.value = result.data.artists.slice(0, 12);
  singerList.value = result.data.artists.slice(13, result.data.artists.length);
});
//首字母筛选
const handleFirstLetter = async (e: any) => {
  if (e.target.tagName === "LI") {
    //动态控制样式
    prevLi.firstLetterLi.className = "";
    e.target.className = "active";
    prevLi.firstLetterLi = e.target;
    let firstLetter = e.target.textContent;
    if (e.target.textContent === "全部") {
      firstLetter = -1;
    }
    if (e.target.textContent === "#") {
      firstLetter = 0;
    }
    const { type, area, offset } = route.query;
    router.push({
      path: "/artlist",
      query: { type, area, offset, initial: firstLetter },
    });
    const result = await request("/artist/list", {
      type,
      area,
      initial: firstLetter,
      limit: 49,
      offset,
    });
    recommendSinger.value = result.data.artists.slice(0, 12);
    singerList.value = result.data.artists.slice(13, result.data.artists.length);
  }
};
//地区筛选
const handleRegion = async (e: any) => {
  if (e.target.tagName === "LI") {
    //动态控制样式
    prevLi.regionLi.className = "";
    e.target.className = "active";
    prevLi.regionLi = e.target;
    let country = e.target.textContent;
    const areaObj = {
      全部: "-1",
      华语: "7",
      欧美: "96",
      日本: "8",
      韩国: "16",
      其他: "0",
    };
    const { type, offset, initial } = route.query;
    router.push({
      path: "/artlist",
      query: { type, offset, initial, area: areaObj[country] },
    });
    const result = await request("/artist/list", {
      type,
      area: areaObj[country],
      initial,
      limit: 49,
      offset,
    });
    recommendSinger.value = result.data.artists.slice(0, 12);
    singerList.value = result.data.artists.slice(13, result.data.artists.length);
  }
};
//类型筛选
const handleGender = async (e: any) => {
  if (e.target.tagName === "LI") {
    //动态控制样式
    prevLi.genderLi.className = "";
    e.target.className = "active";
    prevLi.genderLi = e.target;
    let gender = e.target.textContent;
    const genderObj = {
      全部: "-1",
      男歌手: "1",
      女歌手: "2",
      乐队: "3",
    };
    const { offset, initial, area } = route.query;
    router.push({
      path: "/artlist",
      query: { type: genderObj[gender], offset, initial, area },
    });
    const result = await request("/artist/list", {
      type: genderObj[gender],
      area,
      initial,
      limit: 49,
      offset,
    });
    recommendSinger.value = result.data.artists.slice(0, 12);
    singerList.value = result.data.artists.slice(13, result.data.artists.length);
  }
};
//翻页
const pageChange = async (val: number) => {
  currentPage.value = val;
  const { type, initial, area } = route.query;
  router.push({
    path: "/artlist",
    query: { type, offset: (val - 1) * 49, initial, area },
  });
  const result = await request("/artist/list", {
    type,
    area,
    initial,
    limit: 49,
    offset: (val - 1) * 49,
  });
  recommendSinger.value = result.data.artists.slice(0, 12);
  singerList.value = result.data.artists.slice(13, result.data.artists.length);
};
//跳转歌手详情
const toSingerDetail = (id: number) => {
  router.push({
    name: "ArtDetail",
    params: {
      id,
    },
  });
};
</script>

<style lang="less">
.container {
  width: 100%;
}
.singerSelect {
  width: 1200px;
  margin: 0px auto 10px auto;
  font-size: 14px;
  ul {
    display: flex;
    align-items: center;
    margin-top: 30px;
    height: 30px;
    li {
      padding: 0 16px;
      height: 30px;
      line-height: 30px;
    }
  }
  .active {
    background-color: #e61723;
    border-radius: 15px;
    color: white;
  }
}
.singerImageContainer {
  display: flex;
  flex-wrap: wrap;
  width: 1230px;
  margin: 0 auto;
  padding-top: 20px;
  .singerImageItem {
    flex-grow: 1;
    padding: 0 15px;
    margin: 20px 0;
    width: 175px;
    img {
      width: 175px;
      height: 175px;
      border-radius: 50%;
    }
    .name {
      margin-top: 18px;
      font-size: 16px;
      text-align: center;
    }
  }
}
.singerListContainer {
  display: flex;
  flex-wrap: wrap;
  width: 1230px;
  margin: 30px auto;
  .singerListItem {
    flex-grow: 1;
    width: 175px;
    height: 43px;
    padding: 0 15px;
    font-size: 14px;
  }
}
</style>

<style lang="less" scoped>
.container {
  li {
    cursor: pointer;
    list-style: none;
  }
  .el-pagination {
    text-align: center !important;
    font-weight: 400 !important;
    button {
      width: 40px;
      height: 40px;
      box-sizing: border-box;
      font-size: 12px;
      text-align: center;
      i {
        width: auto !important;
        font-weight: 700;
      }
      &:hover {
        color: #e61723;
      }
    }
    .btn-prev {
      padding-left: 6px;
      padding-right: 12px;
    }
    .btn-next {
      padding-left: 12px;
      padding-right: 6px;
    }
    li {
      width: 40px;
      height: 40px;
      box-sizing: border-box;
      padding: 0 4px;
      font-size: 14px;

      line-height: 40px !important;
      text-align: center;
      &:hover {
        color: #e61723;
      }
    }
    .active {
      background-color: #e61723;
      color: white;
    }
  }
}
</style>
